<template>
  <div class="page">
    <div class="page-top">
      <!-- 面包屑 -->
      <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    </div>
    <div class="page-content">
      <a-table
        :columns="columns"
        :data-source="data"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <span slot="respJson">...</span>
        <span slot="reqJson">...</span>
        <p slot="expandedRowRender" slot-scope="record" style="width: 1200px">
          请求参数：
          <br />
          {{ record.reqJson }}
          <br />
          <br />
          响应参数：
          <br />
          {{ record.respJson }}
        </p>
      </a-table>
    </div>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { getCustomerLogList } from "@/request/api";
export default {
  data() {
    return {
      loading: false,
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "日志管理", path: "", query: {} },
        { name: "三方订单异常日志", path: "/customerlog", query: {} },
      ],
      columns: [
        {
          title: "订单号",
          dataIndex: "orderNum",
          key: "orderNum",
        },
        {
          title: "动作类型",
          dataIndex: "action",
          key: "action",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "平台类型",
          dataIndex: "platform",
          key: "platform",
        },
        {
          title: "请求参数",
          dataIndex: "respJson",
          key: "respJson",
          slots: { title: "请求参数" },
          scopedSlots: { customRender: "respJson" },
        },
        {
          title: "响应参数",
          dataIndex: "reqJson",
          key: "reqJson",
          slots: { title: "响应参数" },
          scopedSlots: { customRender: "reqJson" },
        },
      ],
      pagination: { current: 1, size: 10 },
      data: [],
    };
  },
  components: {
    Hreadcrumb,
  },
  created() {
    this.getCustomerLogList(1, 10);
  },
  beforeCreate() {},
  methods: {
    async getCustomerLogList(p, ps) {
      this.loading = true;
      let params = "p=" + (p - 1) + "&ps=" + ps;
      let { data } = await getCustomerLogList(params);
      console.log(data);
      if (data.success) {
        this.loading = false;
        let pagination = { ...this.pagination };
        pagination.total = data.content.total;
        this.pagination = pagination;
        this.data = data.content.records;
      } else {
        this.loading = false;
        this.data = [];
      }
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getCustomerLogList(pager.current, pager.size);
    },
  },
};
</script>
<style>
.page-content {
  background-color: #fff;
  padding: 25px;
}
</style>